<%@page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/static/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/static/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="/static/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<%--分页插件--%>
	<link href="/static/jquery/bs_pagination/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="/static/jquery/bs_pagination/en.js"></script>
	<script type="text/javascript" src="/static/jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<%--注意css用link--%>
	<link href="/static/jquery/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="/static/jquery/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="/static/jquery/bootstrap-datetimepicker/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<script>
		jQuery(function ($) {

			//页面加载和分页插件
			function loadUserQx(currentPage,rowsPerPage) {
					var data ={};
					$("#searchFrom :input[name]").each(function () {
						data[this.name] = this.value;
					});
					data.currentPage =currentPage;
					data.rowsPerPage =rowsPerPage;

				$.ajax({
					url:"/qx/listUser.json",
					data:data,
					success(page){
						var arr=[];
						$(page.data).each(function (index) {
							console.log(page.data);
							arr.push(`<tr class="active">
					<td><input name="roleUserChk" type="checkbox" value="`+this.id+`" /></td>
					<td>`+(index+1)+`</td>
					<td><a detail="`+this.id+`">`+(this.loginAct||'')+`</a></td>
					<td>`+(this.name||'')+`</td>
					<td>`+(this.dept.name||'')+`</td>
					<td>`+(this.email||'')+`</td>
					<td>`+(this.expireTime||'')+`</td>
					<td>`+(this.allowIps||'')+`</td>
				<td><a>`+(this.lockStatus||'')+`</a></td>
					<td>`+(this.createBy||'')+`</td>
					<td>`+(this.createTime||'')+`</td>
					<td>`+(this.editBy||'')+`</td>
					<td>`+(this.editTime||'')+`</td>
				</tr>`)
						});

						$("#dataBody").html(arr.join(""));
						//初始化分页插件
						$("#page").bs_pagination({
							currentPage:page.currentPage,
							rowsPerPage:page.rowsPerPage,
							totalPages:page.totalPages,
							maxRowsPerPage: page.maxRowsPerPage,//每页最多展示的记录数
							visiblePageLinks: page.visiblePageLinks, //展示分页的卡片数
							onChangePage:function (event, data) {
								loadUserQx(data.currentPage,data.rowsPerPage)
							}
						});
					}
				});
			}
			loadUserQx();
			$("#searchBtn").click(function () {
				loadUserQx();
			})

			$("input[name=startTime]").datetimepicker({
				language: "zh-CN",
				format: "yyyy-mm-dd",//显示格式
				minView: "hour", // 日期时间选择器所能够提供的最精确的时间选择视图。
				initialDate: new Date(),//初始化当前日期
				autoclose: true, //选中自动关闭
				pickerPosition: "bottom-right"
			}).attr("autocomplete", "off");

			$("input[name=endTime]").datetimepicker({
				language: "zh-CN",
				format: "yyyy-mm-dd hh:ii:ss",//显示格式
				minView: "hour", // 日期时间选择器所能够提供的最精确的时间选择视图。
				initialDate: new Date(),//初始化当前日期
				autoclose: true, //选中自动关闭
				pickerPosition: "bottom-right"
			}).attr("autocomplete", "off");

			//添加功能：
			$("#addRoleBtn").click(function () {
				$("#createUserModal").modal("show");
			});
			$("#saveBtn").click(function () {
				if($("#create-confirmPwd").val() !==$("#create-loginPwd").val()){
					alert("两次密码不一致！");
					return;
				}

				$.ajax({
					url:"/qx/addUser.do",
					data:{
						loginAct: $("#create-loginActNo").val(),
						name:$("#create-username").val(),
						loginPwd:$("#create-loginPwd").val(),
						email:$("#create-email").val(),
						expireTime:$("#create-expireTime").val(),
						lockStatus:$(":input[id=create-lockStatus]").val()
					},
					success(data){
							if(data.success){
								loadUserQx();
								$("div.modal:visible").modal("hide").find("input[id=createUserModal]").val("")
							}
							if(data.msg){
								alert(data.msg)
							}
					}
				})

			});

			//全选功能
			$("#selectAll").click(function () {
				$(":checkbox[name=roleUserChk]").prop("checked",this.checked)
			});
			$("#dataBody").on("click",":checkbox[name=roleUserChk]",function () {
				$("#selectAll").prop("checked",$(":checkbox[name=roleUserChk]").size() ==$(":checkbox[name=roleUserChk]:checked").size())
			})

			//删除功能：
			$("#delBtn").click(function () {
				console.log($(":checkbox[name=roleUserChk]:checked").map(function (value) {
					return this.value;
				}).get().join(","))
				$.ajax({
					url:"/qx/del.do?ids="+$(":checkbox[name=roleUserChk]:checked").map(function (value) {
						return this.value;
					}).get().join(","),
					success(data){
						if(data.success){
							loadUserQx();
							$("div.modal:visible").modal("hide")
						}
						if(data.msg){
							alert(data.msg)
						}
					}
				})
			})
		});
	</script>
</head>
<body>

	<!-- 创建用户的模态窗口 -->
	<div class="modal fade" id="createUserModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增用户</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-loginActNo" class="col-sm-2 control-label">登录帐号<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input  type="text" class="form-control" id="create-loginActNo">
							</div>
							<label for="create-username" class="col-sm-2 control-label">用户姓名</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-username">
							</div>
						</div>
						<div class="form-group">
							<label for="create-loginPwd" class="col-sm-2 control-label">登录密码<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="password" class="form-control" id="create-loginPwd">
							</div>
							<label for="create-confirmPwd" class="col-sm-2 control-label">确认密码<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="password" class="form-control" id="create-confirmPwd">
							</div>
						</div>
						<div class="form-group">
							<label for="create-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="email" class="form-control" id="create-email">
							</div>
							<label for="create-expireTime" class="col-sm-2 control-label">失效时间</label>
							<div class="col-sm-10" style="width: 300px;">
								<input name="startTime" type="text" class="form-control" id="create-expireTime">
							</div>
						</div>
						<div class="form-group">
							<label for="create-lockStatus" class="col-sm-2 control-label">锁定状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-lockStatus">
								  <option></option>
								  <option value="1">启用</option>
								  <option value="0">锁定</option>
								</select>
							</div>
							<label for="create-org" class="col-sm-2 control-label">部门<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <select class="form-control" id="create-dept">
                                    <option></option>
                                    <option >市场部</option>
                                    <option>策划部</option>
                                </select>
                            </div>
						</div>
						<div class="form-group">
							<label for="create-allowIps" class="col-sm-2 control-label">允许访问的IP</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-allowIps" style="width: 280%" placeholder="多个用逗号隔开">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="saveBtn" type="button" class="btn btn-primary" >保存</button>
				</div>
			</div>
		</div>
	</div>
	
	
	<div>
		<div style="position: relative; left: 30px; top: -10px;">
			<div class="page-header">
				<h3>用户列表</h3>
			</div>
		</div>
	</div>
	
	<div class="btn-toolbar" role="toolbar" style="position: relative; height: 80px; left: 30px; top: -10px;">
		<form id="searchFrom" class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
		  
		  <div class="form-group">
		    <div class="input-group">
		      <div class="input-group-addon">用户姓名</div>
		      <input name="name" class="form-control" type="text">
		    </div>
		  </div>
		  &nbsp;&nbsp;&nbsp;&nbsp;
		  <div class="form-group">
		    <div class="input-group">
		      <div class="input-group-addon">部门名称</div>
		      <input id="deptId" class="form-control" type="text">
		    </div>
		  </div>
		  &nbsp;&nbsp;&nbsp;&nbsp;
		  <div class="form-group">
		    <div class="input-group">
		      <div class="input-group-addon">锁定状态</div>
			  <select class="form-control">
			  	  <option></option>
			      <option>锁定</option>
				  <option>启用</option>
			  </select>
		    </div>
		  </div>
		  <br><br>
		  
		  <div class="form-group">
		    <div class="input-group">
		      <div class="input-group-addon">失效时间</div>
			  <input name="startTime" class="form-control" type="text" id="startTime" />
		    </div>
		  </div>
		  
		  ~
		  
		  <div class="form-group">
		    <div class="input-group">
			  <input name="endTime" class="form-control" type="text" id="endTime" />
		    </div>
		  </div>
		  
		  <button id="searchBtn" type="button" class="btn btn-default">查询</button>
		  
		</form>
	</div>
	
	
	<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px; width: 110%; top: 20px;">
		<div class="btn-group" style="position: relative; top: 18%;">
		  <button id="addRoleBtn" type="button" class="btn btn-primary" ><span class="glyphicon glyphicon-plus"></span> 创建</button>
		  <button id="delBtn" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
		</div>
		<div class="btn-group" style="position: relative; top: 18%; left: 5px;">
			<button type="button" class="btn btn-default">设置显示字段</button>
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				<span class="caret"></span>
				<span class="sr-only">Toggle Dropdown</span>
			</button>
			<ul id="definedColumns" class="dropdown-menu" role="menu"> 
				<li><a href="javascript:void(0);"><input type="checkbox"/> 登录帐号</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 用户姓名</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 部门名称</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 邮箱</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 失效时间</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 允许访问IP</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 锁定状态</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 创建者</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 创建时间</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 修改者</a></li>
				<li><a href="javascript:void(0);"><input type="checkbox"/> 修改时间</a></li>
			</ul>
		</div>
	</div>
	
	<div style="position: relative; left: 30px; top: 40px; width: 110%">
		<table class="table table-hover">
			<thead>
				<tr style="color: #B3B3B3;">
					<td><input id="selectAll" type="checkbox" /></td>
					<td>序号</td>
					<td>登录帐号</td>
					<td>用户姓名</td>
					<td>部门名称</td>
					<td>邮箱</td>
					<td>失效时间</td>
					<td>允许访问IP</td>
					<td>锁定状态</td>
					<td>创建者</td>
					<td>创建时间</td>
					<td>修改者</td>
					<td>修改时间</td>
				</tr>
			</thead>
			<tbody id="dataBody">

				<%--<tr>
					<td><input type="checkbox" /></td>
					<td>2</td>
					<td><a  href="detail.html">lisi</a></td>
					<td>李四</td>
					<td>市场部</td>
					<td>lisi@bjpowernode.com</td>
					<td>2017-02-14 10:10:10</td>
					<td>127.0.0.1,192.168.100.2</td>
					<td><a href="javascript:void(0);" onclick="window.confirm('您确定要启用该用户吗？');" style="text-decoration: none;">锁定</a></td>
					<td>admin</td>
					<td>2017-02-10 10:10:10</td>
					<td>admin</td>
					<td>2017-02-10 20:10:10</td>
				</tr>--%>
			</tbody>
		</table>
	</div>
	
	<div id="page" style="height: 50px; position: relative;top: 30px; left: 30px;">
		
	</div>
			
</body>
</html>